<template>
  <!-- 音乐播放界面 -->
  <div class="header">
    <div class="top">
      <van-icon
        @click="$emit('close')"
        size="50"
        color="white"
        name="arrow-down"
      />
      <div class="img">
        <img src="../../public/img/needle-plus.png" alt="" />
      </div>
    </div>
    <div class="middle">
      <div
        class="middle_s"
        :style="{ 'animation-play-state': play_state ? 'running' : 'paused' }"
      >
        <img src="../../public/img/disc-plus.png" alt="" />
        <div class="middle_h">
          <img :src="song_info.picUrl" alt="" />
        </div>
      </div>
    </div>

    <div class="lyric">
      <h2>
        <span>{{ song_info.song_name }}</span>
        <b> -{{ song_info.ars | add_filter }}</b>
      </h2>
      <div>
        <!--  歌词组件 -->
        <lyriv></lyriv>
      </div>
    </div>

    <!-- 组件进度条 -->
    <slider></slider>

    <div class="end">
      <div class="end_key">
        <i class="iconfont iconshangyishou1" @click.stop="$emit('prev')"></i>
        <van-icon
          name="play-circle-o"
          v-if="!play_state"
          @click.stop="play_song"
        />
        <van-icon name="pause-circle-o" v-else @click.stop="pause_song" />
        <i class="iconfont iconshangyishou" @click.stop="$emit('next')"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import slider from "./slider";
import lyriv from "./lyriv";
export default {
  data() {
    return {
      value: 10,
    };
  },
  components: {
    slider,
    lyriv,
  },
  filters: {
    add_filter(val) {
      if (!val) {
        return;
      }
      let res = "";
      val.forEach((el) => {
        res += el.name + "/";
      });
      return res.slice(0, -1);
    },
  },
  computed: {
    ...mapState(["song_info", "play_state"]),
  },
  methods: {
    onChange() {},
    // back() {
    //   this.$router.go(-1);
    // },
    pause_song() {
      this.$audio.pause();
    },
    play_song() {
      this.$audio.play();
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.header {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background-color: black; /* 浏览器不支持的时候显示 */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(99, 90, 90, 0.884) -5%,
    rgba(115, 215, 228, 0.705) 46%,
    rgba(88, 143, 226, 0.548) 102%
  );
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  font-size: 17px;

  img {
    width: 100%;
  }
  .top {
    i {
      position: absolute;
      top: 15px;
      left: 20px;
    }
    .img {
      position: absolute;
      top: -11px;
      left: 42%;
      z-index: 10;
      width: 110px;
      height: 157px;
      transform: rotate(-8deg);
    }
  }
  .middle {
    padding-top: 70px;

    .middle_s {
      width: 250px;
      height: 250px;
      margin: 0 auto;
      position: relative;
      animation: rotate 8s linear infinite;
      // background: url(../../../public/img/disc-plus.png) no;
      .middle_h {
        position: absolute;
        margin: 0 auto;
        left: 19%;
        top: 19%;
        width: 155px;
        height: 155px;
        border-radius: 50%;
        z-index: 8;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
    }
  }

  .lyric {
    padding: 0 35px;
    color: white;

    font-size: 14px;
    h2 {
      span {
        font-size: 18px;
      }
      b {
        font-size: 16px;
        color: hsla(0, 0%, 100%, 0.6);
      }
    }
  }

  .end {
    padding-top: 62%;

    .end_key {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-around;

      align-items: center;

      i {
        color: hsla(0, 0%, 100%, 0.801);
        font-size: 60px;
      }
    }
  }
}
</style>
